/**
 * 公共样式
 */

/* 全局无边框 */
button:after {
	border: none;
}

/* 页面容器 */
.container {
	min-height: 100vh;
	width: 750rpx;
	margin: 0;
	padding: 0;
	background: #FFFFFF;
}

/* 固定页面高度 */
.container-fixed {
	height: 100vh;
	width: 750rpx;
	margin: 0;
	padding: 0;
	background: #FFFFFF;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-content: flex-start;
}

/* 状态栏：为了防止 position: sticky; top: var(--status-bar-height);时，状态栏那块地方是透明的，能看到页面内容 */
/* 先1再2，是为了好看 */
.status-bar-view-1 {
	width: 750rpx;
	height: var(--status-bar-height);
	background: transparent;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 99
}

/* 上面动画也不完美，不如简单点。可以仅用2，并且可以删除监听滚动距离逻辑 */
.status-bar-view-2 {
	width: 750rpx;
	height: var(--status-bar-height);
	background: #FFFFFF;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 99
}

/* 导航栏 start */
.customer-nav-view {
	height: 80rpx;
	padding: 10rpx 40rpx 8rpx;
	background: #FFFFFF;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
}

/* 导航栏-浮动 */
.nav-sticky {
	position: sticky;
	top: var(--status-bar-height);
	z-index: 99;
}

.customer-nav-left {}

/* customer-nav-title 和 customer-nav-center 二选一 */
.customer-nav-title {
	width: 420rpx;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

.customer-nav-center {
	width: 380rpx;
	height: 50rpx;
	color: #666666;
	font-size: 26rpx;
	border: 2rpx solid #666666;
	border-radius: 50rpx;
	padding: 4rpx 20rpx 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 16rpx;
}

.customer-nav-right {
	padding-right: 20rpx;
	color: #000000;
	font-size: 36rpx;
}

.logo-img {
	height: 75rpx;
	width: 75rpx;
	border-radius: 50%;
}

/* 导航栏 end */

/* 视频列表 start */
.video-list-view {
	/* calc(750rpx - 40rpx - 40rpx); */
	width: 670rpx;
	padding: 0 40rpx;
}

.video-list-title {
	height: 40rpx;
	padding-bottom: 16rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.video-list-title-left {
	font-weight: bold;
	font-size: 28rpx;
}

.video-list-title-right {
	height: 22rpx;
	width: 22rpx;
	margin-right: 10rpx;
	background: #FFFFFF;
	border: 2rpx solid #666666;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.video-list-content {
	width: 670rpx;
	padding-bottom: 30rpx;
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-content: flex-start;
	flex-wrap: wrap;
	column-gap: 27rpx;
	row-gap: 25rpx;
}

.video-list-item {
	width: 204rpx;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: start;
	gap: 10rpx;
}

.video-list-item-img {
	width: 204rpx;
	height: 312rpx;
	background: #000000;
	border-radius: 10rpx;
}

.video-list-item-name {
	margin-top: 5rpx;
	width: 204rpx;
	font-size: 26rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.video-list-item-other {
	width: 204rpx;
	font-size: 22rpx;
	color: #666666;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.video-list-content-empty {
	width: 670rpx;
	padding: 60rpx 0;
	text-align: center;
	font-size: 26rpx;
	color: #888888;
}

/* 视频列表 end */